<template>
    <el-container>
    <el-main class="maindiv">
    
    <div class="timediv">
    <div id="timestampdiv">
    <el-input v-model="ttime" :placeholder="timestamp" size="mini" @focus="handlertime"><template slot="prepend">当前时间戳</template>
    </el-input>
    </div>
    <div id="datetimediv">
    <el-input v-model="dtime" :placeholder="datetime" size="mini" @focus="handlerstamp"><template slot="prepend">当前时间</template>
    </el-input>
    </div>
    <div class="butdiv">
    <button @click="tansferGo">转换</button>
    </div>
    </div>
    </el-main>
    </el-container>
</template>

<script>
import {TimeToStamp,StampToTime} from '../../api/autopay'; 
import {shijianchuo,formatDate,timetostamp,stamptotime} from '../../js/dates';
export default {
    name: 'TimeTanster',
    data(){
        return {
            ttime:"",
            dtime:"",
            timestamp:"",
            datetime:"",
        }
    },
    mounted () {
      var _this = this; //声明一个变量指向vue实例this,保证作用域一致
      this.timer = setInterval(function() {

      _this.timestamp = shijianchuo();
      _this.datetime = formatDate(new Date(),'yyyy-MM-dd hh:mm:ss');//修改数据date
      }, 
      1000);
    },
    methods: {
        tansferGo(){
            if (this.ttime != ""){
                this.dtime = stamptotime(this.ttime)
            }else if (this.dtime != ""){
                
                this.ttime = timetostamp(this.dtime);
            }
        },
        handlerstamp(e){
            this.ttime = "";
            this.dtime = this.datetime;
        },
        handlertime(e){
            this.dtime = "";
            this.ttime = this.timestamp;
        }
    }//methods
}
</script>

<style>
    .maindiv{
        text-align: center;
        /*margin-top: 5%;*/
        border: 10px;
        height: 1080px;
        /*background: #F1F6FB; */
        background-image: url("banner2.jpg") ;
    }
    .timediv{
        margin-top: 20%;
        height: 200px;
        width: 300px;
        margin-left: 42%;
        text-align: left;
        /*background: #0C81E7;*/

    }
    #timestampdiv{
        margin-top: 80px;
    }
    #datetimediv{
        margin-top: 30px;
    }
    .butdiv{
        text-align: center;
        margin-top: 10%;
    }
</style>